<template>
  <div class="home">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>首页</span>
        </div>
      </template>
      <el-alert title="欢迎来到我的Vue项目！" type="success" show-icon />
      
      <el-card class="counter-card">
        <template #header>
          <div class="card-header">
            <span>计数器示例</span>
          </div>
        </template>
        <div class="counter-content">
          <el-row :gutter="20" type="flex" justify="center" align="middle">
            <el-col :span="12">
              <div class="counter-info">
                <p>当前计数: <el-tag type="primary">{{ counterStore.count }}</el-tag></p>
                <p>计数的两倍: <el-tag type="success">{{ counterStore.doubleCount }}</el-tag></p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="counter-buttons">
                <el-button type="primary" @click="counterStore.increment">增加</el-button>
                <el-button @click="counterStore.decrement">减少</el-button>
                <el-button type="success" @click="counterStore.incrementBy(10)">增加10</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      
      <div class="navigation">
        <el-menu mode="horizontal" :router="true">
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/about">关于我们</el-menu-item>
          <el-menu-item index="/tools">工具库演示</el-menu-item>
        </el-menu>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { useCounterStore } from '../stores/counter.js'

// 使用store
const counterStore = useCounterStore()
</script>

<style scoped>
.home {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.counter-card {
  margin-top: 20px;
}

.counter-content {
  padding: 20px;
}

.counter-info {
  text-align: center;
}

.counter-info p {
  margin: 10px 0;
}

.counter-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.navigation {
  margin-top: 20px;
}
</style>